<template>
    <div class="news-detail">
        <div class="main">
            <div class="breadcrumb-list">
                <div class="breadcrumb-item">
                    <nuxt-link href="/">华锐云空间</nuxt-link>
                    <el-icon size="16" color="#666">
                        <DArrowRight />
                    </el-icon>
                    <nuxt-link href="/template.html">元宇宙场景搭建</nuxt-link>
                    <el-icon size="16" color="#666">
                        <DArrowRight />
                    </el-icon>
                    <nuxt-link href="/news.html">资讯列表</nuxt-link>
                </div>
            </div>

            <div class="content">
                <div class="header">
                    <h1 class="title">
                        {{ detail.title }}
                    </h1>
                    <div class="tools">
                        <div class="origin">来源：{{ detail.origin }}</div>
                        <div class="time">
                            时间：{{
                                formatDate(
                                    detail.createtime,
                                    "YYYY-MM-DD HH:mm"
                                )
                            }}
                        </div>
                        <div class="views">浏览量：{{ detail.views }}</div>
                    </div>
                </div>
                <div class="body" v-html="detail.content"></div>
                <div class="footer">
                    <div class="prev">
                        上一篇：
                        <NuxtLink
                            :to="`/news/${detail.front.id}.html`"
                            target="_blank"
                            class="link"
                            v-if="detail.front"
                        >
                            {{ detail.front.title }}
                        </NuxtLink>
                        <div v-else>没有更多了</div>
                    </div>
                    <div class="next">
                        下一篇：
                        <NuxtLink
                            :to="`/news/${detail.after.id}.html`"
                            target="_blank"
                            class="link"
                            v-if="detail.after"
                        >
                            {{ detail.after.title }}
                        </NuxtLink>
                        <div v-else>没有更多了</div>
                    </div>

                    <NuxtLink to="/news.html" class="back">
                        <img :src="`${_oss_}images/news/back-icon.png`" />
                        返回列表
                    </NuxtLink>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useContent } from ".";
import { formatDate } from "@/utils";
import { DArrowRight } from "@element-plus/icons-vue";

const { detail, GetDetail } = useContent();

await GetDetail();

useSeoMeta({
    title: detail.value.title + "-北京华锐云空间",
    description: detail.value.subtitle,
});
</script>
<style lang="scss">
.body {
    p {
        margin-bottom: 1em;
        line-height: 1.5em;
    }
}

.m-page .body {
    p {
        margin-bottom: 1em;
        line-height: 1.5em;
    }
}
</style>
<style lang="scss" scoped>
.news-detail {
    background-color: #edf5fa;
    padding: 30px 0 54px;

    .main {
        width: 1200px;
        margin: 0 auto;
        border-radius: 4px;
        overflow: hidden;

        .breadcrumb-list {
            width: 1200px;
            margin: 0 auto 20px;

            .breadcrumb-item {
                display: flex;
                align-items: center;
                font-size: 16px;
                line-height: 1;
                user-select: none;

                a {
                    color: #5085fb;
                    text-decoration: none;
                }

                .el-icon {
                    margin: 0 5px;
                    margin-top: 1px;
                }
            }
        }

        .content {
            .header {
                padding: 40px 0 30px;
                text-align: center;
                background-color: #fff;
                border-bottom: 3px dotted #999;

                .title {
                    font-size: 20px;
                    color: #111;
                    font-weight: 600;
                    width: 1000px;
                    margin: 0 auto;
                }

                .tools {
                    display: flex;
                    justify-content: center;
                    margin-top: 19px;
                    color: #999;

                    .origin,
                    .time {
                        margin-right: 50px;
                    }
                }
            }

            .body {
                padding: 30px;
                background-color: #fff;
                color: #333;
            }

            .footer {
                position: relative;
                padding: 30px;

                .prev,
                .next {
                    display: flex;
                    align-items: center;
                    color: #666;
                    font-size: 14px;
                    cursor: pointer;

                    .link {
                        text-decoration: none;
                        color: #000;

                        &:hover {
                            color: #5085fb;
                            text-decoration: underline;
                        }
                    }
                }

                .next {
                    margin-top: 20px;
                }

                .back {
                    position: absolute;
                    right: 44px;
                    top: 50%;
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    color: #333;
                    cursor: pointer;
                    transform: translateY(-50%);
                    text-decoration: none;

                    img {
                        width: 14px;
                        height: 14px;
                        margin-right: 8px;
                    }
                }
            }
        }
    }
}
</style>
